<template>
  <div class="setting-wrapper">
    <div class="setting-headbar">
      <div><b>通行能力</b></div>
      <transition name="el-fade-in">
        <div v-if="isModified">
          <el-button type="warning" link>
            <el-icon><WarningFilled /></el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="info" link>
            <el-icon><Remove /></el-icon>
            <span>取消</span>
          </el-button>
        </div>
      </transition>
    </div>
    <el-table :data="capacityLayout" style="width: 100%" height="240">
      <!-- <el-table-column type="index"></el-table-column> -->
      <!-- <el-table-column
        prop="areaCode"
        label="#"
        min-width="40"
      ></el-table-column> -->
      <el-table-column prop="areaType" label="类" min-width="40">
      </el-table-column>
      <el-table-column prop="weatherProbability" label="概率" min-width="40">
      </el-table-column>
      <el-table-column
        prop="weatherCoverage"
        label="范围"
        min-width="40"
      ></el-table-column>
      <el-table-column
        prop="weatherIntensity"
        label="强度"
        min-width="40"
      ></el-table-column>
      <el-table-column
        prop="capacityRatio"
        label="通行能力比值"
        min-width="120"
      >
        <template #default="scope">
          <el-input-number
            v-model="scope.row.capacityRatio"
            :precision="2"
            :step="0.01"
            :min="0"
            :max="1"
            style="width: 100%"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
import useCapacityStore from "@/store/capacity.js";
const capacityStore = useCapacityStore();
const capacityLayout = computed(() => capacityStore.capacityLayout);

const capacityLayoutCopied = ref([]);
const isModified = computed(() => {
  return (
    JSON.stringify(capacityLayout.value) !=
    JSON.stringify(capacityLayoutCopied.value)
  );
});

const initializeCopies = () => {
  capacityLayoutCopied.value = JSON.parse(JSON.stringify(capacityLayout.value));
};

const handleSave = () => {
  axios
    .post("api/capacity_params.php", {
      key: "capacityLayout",
      value: capacityLayoutCopied.value,
    })
    .then((response) => {
      console.log(response);
      capacityStore.capacityLayout = JSON.parse(
        JSON.stringify(capacityLayoutCopied.value)
      );
      console.log(capacityLayout);
    })
    .catch((error) => console.error(error));
};

onMounted(() => {
  initializeCopies();
});
</script>

<style scoped>
@import "./style.css";
</style>
